<%--
  Created by IntelliJ IDEA.
  User: YanHilin
  Date: 2020/5/27
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>更换鲜花照片</title>
    <base href="http://localhost:8080/onlineflower/">
    <%@ include file="/page/comment/head.jsp" %>
    <style type="text/css">
        #image-holder {
            height: 300px;
            width: 500px;
            border: 2px solid black;
        }

        .show_image {
            width: 500px;
            height: 300px;
        }

        .messWindow {
            position: absolute;
            top: 90px;
            left: 45%;
            margin: 0 auto;
            background-color: snow;
            height: 40px;
            width: 200px;
            text-align: center;
            vertical-align: middle;
        }

        .messWindow span {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
<%@include file="/page/enterprise/head_nav.jsp" %>

<div id="content">
    <form action="flowerPhotoServlet" enctype="multipart/form-data" method="post">
        <div class="form-group">
            <input type="hidden" class="form-control" name="flowerid" value="${param.flowerid}">
            <input name="flower_photo" id="fileUpload" type="file">
        </div>

        <button type="submit" class="btn btn-secondary btn-lg btn-block"><span class="glyphicon glyphicon-send"></span>
            确认上传
        </button>
    </form>
    <div id="image-holder"></div>
    <div class="messWindow">
        <span>${requestScope.mess}</span>
    </div>
</div>
</body>
<script>
    $("#fileUpload").on('change', function () {
        if (typeof (FileReader) != "undefined") {
            var image_holder = $("#image-holder");
            image_holder.empty();
            var reader = new FileReader();
            reader.onload = function (e) {
                $("<img  />", {
                    "src": e.target.result,
                    "class": "show_image"
                }).appendTo(image_holder);
            }
            image_holder.show();
            reader.readAsDataURL($(this)[0].files[0]);
        } else {
            alert("This browser does not support FileReader.");
        }
    });
</script>
</html>
